// 创建Vue变量vm
let vm=new Vue({
    el:"#app",//通过ID选择器找到Vue的控制范围
    delimiters: ["[[","]]"], //定义插值表达式的左右语法
    //数据对象
    data:{
        // v-model
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:false,
        image_code:"",
        // v-show
        msg_code:"",
        error_mobile_message:"",
        error_image:false,
        error_name: false,
        error_password:false,
        error_password2:false,
        error_mobile:false,
        error_allow:false,
        //error_message
        error_name_message:"",
        error_sms_code:false,
        sms_code_errmsg:"",
        image_code_url:"",
        uuid :"",
        send_flag:false,
        error_image_code_message:"",
        sms_code_tip:"获取短信验证码",


    },
     mounted(){

        this.gnerate_image_code()


    },
    //定义和实现事件方法
    methods:{
         send_sms_code(){
        if(this.send_flag==true){
            return
        }
        this.send_flag = true
            if(this.error_mobile==true||this.error_image==true){return;}
        let url="sms_codes/"+this.mobile+"?image_code="+this.image_code+"&uuid="+this.uuid
            axios.get(url,{responseType:"json"})
                .then(response=>{
                    if(response.data.code=="0"){

                        //显示倒计时
                        let duration = 60
                        let t = setInterval(
                            ()=>{
                                if(duration==1){
                                    clearInterval(t)
                                    this.sms_code_tip = "获取短信验证码"
                                    this.generate_image_code()
                                    this.send_flag = false
                                }
                                else {
                                    duration -= 1
                                    this.sms_code_tip=duration+"秒"
                                }
                            },1000
                        )
                    }
                    else if(response.data.code=="4001"){
                        //图形验证码错误
                        this.error_image_code_message =response.data.errmsg
                        this.error_image = true
                        this.send_flag = true
                    }
                     })
                .catch(b=>{
                    console.log(b.data)
                })
                   },
        // 校验用户名
    check_username(){
        let  re = /^[a-zA-Z0-9-_]{5,20}$/
        if(re.test(this.username)){
            this.error_name = false
            if(this.error_name==false){
                let use = "usernames/"+this.username+"/count"
            axios.get(use,{"type":"json"})
                .then(response=>{
                      if(response.data.count==1){
                //用户名已经存在
                this.error_name_message="用户名已经存在"
                this.error_name=true
            }else{
                //用户名不存在
                this.error_name=false
            }
                })
            }
        }else{
            this.error_name = true
            this.error_name_message = '请输入5-20个字符的正确用户名'
        }

    },
    // 校验密码
    check_password(){
        let re = /^[a-zA-Z0-9]{8,20}$/;
        if(re.test(this.password)){
            this.error_password = false
        }else{
            this.error_password = true
        }
    },
    // 校验确认密码
    check_password2(){
        if(this.password != this.password2){
            this.error_password2 = true
        }else {
            this.error_password2 = false
        }
    },
    // 校验手机号
    check_mobile(){
        let re = /^1[3-9]\d{9}$/
        if(re.test(this.mobile)){
            this.error_mobile = false
             let url="/mobiles/"+this.mobile+"/count"
    axios.get(url,{responseType:"json"})
        .then(response=>{
            //正确响应时执行的代码
            if(response.data.count===1){
                this.error_mobile=true
                this.error_mobile_message="手机号已经存在"
            }else{
                this.error_mobile=false
            }
        }).catch(error=>{
            //出现异常时执行的代码
            console.log(error)
        })
        }else{
            this.error_mobile = true

        }
    },
    // 校验是否勾选协议
    check_allow(){
        if(this.allow == true){
            this.error_allow = false
        }else {
            this.error_allow = true
        }
    },
        check_image(){
        if(this.image_code.length != 4){
            this.error_image = true
        }else {
            this.error_image= false
        }
        },

    // 监听表单提交事件
    on_submit(){
        this.check_username();
        this.check_password();
        this.check_password2();
        this.check_mobile();
        this.check_allow();
        if (this.error_name == true || this.error_password == true ||
            this.error_password2 == true || this.error_mobile == true ||
            this.error_allow == true||sms_code_errmsg){
            window.event.returnValue = false;
        }
    },



        check_msg_code(){
            if(this.sms_code.length!=4){
            this.error_sms_code = true
        }
        else {
            this.error_sms_code = false
        }
        },
        check_msg_code(){
    if(this.msg_code.length!=4){
        this.error_sms_code=true
        this.error_sms_code_message="请填写4位短信验证码"
    }else{
        this.error_sms_code=false
    }
},

         gnerate_image_code(){
            this.uuid= generateUUID()
        this.image_code_url = "image_codes/"+this.uuid
        }
        ,


    },

})